<template>
  <!-- 子组件在点击关闭按钮的时候 会触发close 事件  我们在这个事件中 修改父组件穿过来的 showDialog -->
  <!-- 子组件不能直接修改爷爷组件的值 通过触发父组件 修改爷爷组件的值-->
  <el-dialog
    :title="title"
    :visible="showDialog"
    width="50%"
    @close="closeFn"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select
          v-model="form.manager"
          value="shanghai"
          :loading="isloading"
          loading-text="正在获取负责人信息..."
          placeholder="请选择活动区域"
          @focus="getEmployeesSimpleList"
        >
          <el-option v-for="item in EmployeesSimpleList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click.native="closeFn">取 消</el-button>
      <el-button type="primary" @click="addDept">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getEmployeesSimpleListAPI } from '@/api/employees' // 获取员工
import { addDempAPI, getDepartmentsAPI, editDempAPI } from '@/api/departments' // 添加部门 获取部门
export default {
  props: {
    // 控制弹出框显示和隐藏
    showDialog: {
      type: Boolean,
      required: true
    },
    // 当前行的数据
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    // 校验部门名称是否重复
    const validatorName = async(rule, value, callback) => {
      let isRepeat
      if (this.form.id) {
        // 编辑部门的名称校验规则
        const { depts } = await getDepartmentsAPI()
        const first = depts.filter(item => (item.id !== this.row.id && item.pid === this.row.pid)) // 拿到除自己以外的一级部门
        isRepeat = first.some(item => item.name === value) // 一级部门不能同名
      } else {
        // 添加部门的名称校验规则
        isRepeat = this.row.children && this.row.children.some(item => item.name === value)
      }
      return isRepeat ? callback(new Error('部门已存在')) : callback()
    }
    // 校验部门编码重复
    const validatorCode = async(rule, value, callback) => {
      const res = await getDepartmentsAPI()
      let isRepeat
      if (this.form.id) {
        isRepeat = res.depts.some(item => (item.code !== this.row.code && item.code === value)) // 编辑的时候把自己的编码排除出去
      } else {
        isRepeat = res.depts.some(item => item.code === value)
      }
      return isRepeat ? callback(new Error('部门编码已存在')) : callback()
    }
    return {
      form: {
        code: '', // 部门编码
        name: '', // 部门名称
        introduce: '', // 部门介绍
        manager: '', // 部门负责人
        pid: '' // 父id
      },
      EmployeesSimpleList: [],
      isloading: false, // 下拉选择器的loading,
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { validator: validatorName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { validator: validatorCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 20 到 100 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return (this.form.id ? '编辑' : '添加') + '部门'
    }
  },
  created() {
  },
  methods: {
    // 关闭弹层
    closeFn() {
      this.$refs.form.resetFields() // 重置表单
      this.$emit('update:show-dialog', false)
      // 关闭的弹层的时候将form回归原始值 用来判断标题文本
      // 关弹层有动画效果 不能同步改form 否则在关弹层的瞬间标题文本会变成添加部门 设置定时器
      setTimeout(() => {
        this.form = {
          code: '',
          name: '',
          introduce: '',
          manager: '',
          pid: ''
        }
      }, 200)
    },
    // 获取员工列表
    async getEmployeesSimpleList() {
      this.isloading = true
      const res = await getEmployeesSimpleListAPI()
      this.EmployeesSimpleList = res
      this.isloading = false
    },
    // 点击确认添加部门 / 编辑部门
    async addDept() {
      try {
        await this.$refs.form.validate() // 校验整个表单
        if (this.form.id) {
          const { id, code, name, introduce, manager } = this.form
          await editDempAPI({ id, code, name, introduce, manager })
          this.$message.success('编辑部门成功') // 提示
        } else {
          this.form.pid = this.row.id // pid赋值
          await addDempAPI(this.form) // 发请求添加部门
          this.$message.success('添加部门成功') // 提示
        }
        this.closeFn() // 关弹层
        this.$emit('add-success') // 重新获取数据刷新页面
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑部门给form赋值
    setDept() {
      // 将row这个数据 拷贝给this.form 在显示编辑部门的时候 就会显示相应的数据  可以根据form中的数据来判断是添加部门还是显示部门
      // 也可以用什么拿什么
      this.form = JSON.parse(JSON.stringify(this.row))
    }
  }
}
</script>

<style>

</style>
